var webpack = require('webpack')

//使用path模块
var path = require('path');
var Root_Path = path.resolve(__dirname);

//插件会记录一些编译的信息，并可以配置生成html
var htmlWebpackPlugin = require('html-webpack-plugin');

//将style-loader内联的css分离
const ExtractTextPlugin = require('extract-text-webpack-plugin');

console.log("************** " + Root_Path + " ***************");

module.exports = {
    //解决fs module not found
    node: {
        fs: "empty"
    },
    /*
     * 入口文件, 每一个json条目表示一个chunk，可以在htmlWebpackPlugin中引用
     * 这样就可以按需引用
     */
    entry: {
        main: path.resolve(Root_Path, 'react/App')
    },
    /**
     * 这样上面的就不用写后缀名了
     */
    resolve: {
        extensions:['.js', '.jsx', '.tsx', '.ts']
    },
    /*
     * 输出文件
     * path 表示输出路径
     * filename 表示输出的文件名
     * publicpack，表示输出文件的引用路径的基地址，
     * 如 main（./src/script/App.js)将会被输出到_dirname/disk/js/name-hash.js,htmlWebpackPlugin引用这个chunk时，路径则是base_path/filename
     */
    output: {
        path: path.resolve(Root_Path, 'api/dist'),
        filename: 'js/[name].js',
        //配置输出的文件引用的访问地址
        publicPath: '/'
    },
    //定义loader,将scss，jxs等交给loader处理，然后输出
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query : {
                    plugins: [
                        ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
                    ]
                }
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_module/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader',
                        'less-loader'
                    ]
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader',
                        'sass-loader?outputStyle=expanded'
                    ]
                })
            },
            {
                test: /\.html$/,
                //将html输出成一个string
                loader: ['html-loader']
            },
            {
                test: /\.ejs$/,
                loader: ['ejs-loader']
            },
            /*
             * css，html href中，可以直接引用url，js中需要require一下，这样就可以将图片的url改成对应的url
             * 图片将被输出到output.path/name
             *
             */
            {
                test: /\.(png|jpg)$/,
                loaders: [
                    'url-loader?limit=1000&name=assets/[name].[ext]',
                    'image-webpack-loader'
                ]
            }
        ]
    },

    plugins: [
        /**
         * 可以引用多次，这样多个html可以分别配置
         * inlineSource: 'initial.*\.js' //使用内联的形式插入所以以initial开头的脚本，这里不是chunk名，是最终生成的js文件名
         * excludeChunks:[main] //除了main这个chunk，其他都引入
         * date: new Date(),//可以自定义一些opiton，在模版中通过htmlWebpackPlugin.options.date的方式访问
         */

        // new htmlWebpackPlugin({
        //     template: 'App.ejs',//模版的名字
        //     filename: 'App.html',//最终生成的文件名，根目录为output的path
        //     inject: 'body', //注入位置 true和body表示注入在body后面，head表示在head处注入，false表示不注入
        //     title: 'movies',
        //     chunks: ['main'], //引用某个chunk
        //     //压缩
        //     minify: {
        //         removeComments: true,
        //         collapseWhitespace: true
        //     }
        // }),

        new ExtractTextPlugin("styles/style.css"), //将内联的css分离出来，放到style.css中
    ]
}
